<template>
    <div>
        <filter-order @up-date-search="handleUpdateSearch"></filter-order>
        <table-data :tableData="resTable">
            <template #operate>
                <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="success" size="small" link @click="goOrderDetail(scope)">详情</el-button>
                    <el-button type="info" size="small" link @click="operateCancel(scope)">取消</el-button>
                </template>
                </el-table-column>
            </template>
        </table-data>
        <!-- 分配时间 -->
        <select-time>
            
        </select-time>
        <!-- 选择员工 -->
        <el-dialog v-model="staffSelectStore.dialogTableVisible" align-center title="选择员工" width="500">
            <select-human>
                <template #confirmButton>
                    <div class="w-full text-center">
                        <el-button 
                            type="primary" 
                            size="large" 
                            style="width: 120px; margin: 30px auto;" 
                            @click="confirmServiceHuman()"
                        >
                            确定
                        </el-button>
                    </div>
                </template>
            </select-human>
        </el-dialog>
        <!-- 地图弹窗 -->
        <el-dialog align-center v-model="staffSelectStore.mapDetail"  width="850" class="h-140">
            <!-- 传递顾客位置,用于后续距离计算 -->
            <t-map mode="orderInfo"></t-map>
        </el-dialog>

        <!-- 确认收款 -->
        <confirm-paid></confirm-paid>
        <!-- 取消订单 -->
        <el-dialog align-center v-model="showCancelOrder"  width="500">
            <div class="w-full text-center text-xl mb-8">取消订单</div>
            <ul class="ml-24">
                <li class="mb-3">订单号: {{ data.order }}</li>
                <li class="mb-3">客户姓名: {{ data.customerName }}</li>
                <li class="mb-3">客户地址: {{ data.address }}</li>
                <li class="mb-3">服务内容: {{ data.serviceType }}</li>
                <li>价格: {{ data.price }}</li>
            </ul>
            <div class="w-full text-center mt-10">
                <el-button type="danger" size="large" style="width: 150px;" @click="cancelOrder">确认取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="orderInfo">
import { computed, onMounted, onUnmounted, reactive, defineAsyncComponent } from 'vue';
import SelectTime from './SelectTime.vue';
import SelectHuman from './SelectHuman.vue';
import ConfirmPaid from './ConfirmPaid.vue';
import router from '@/router';
import useCancel from '@/hooks/useCancel';
import instance from '@/api';
import { ElMessage } from 'element-plus';
import TableData from './TableData.vue';
import FilterOrder from './FilterOrder.vue';
import { useStaffSelectStore } from '@/stores/useStaffSelectStore';
import { emitter } from '@/utils/emitter';

interface tableDataType {
  id: number,
  order: string,
  branches: string,
  customerName: string,
  phone: string,
  address: string,
  customerAttribute: string,
  price:number,
  customerType:string,
  serviceType:string,
  expectedTime:string,
  arrivalTime:string,
  serviceStaff:string,
  payStatus:number
}
const staffSelectStore = useStaffSelectStore()
const emit = defineEmits(['sendData'])
const props = defineProps<{ type:'all'| 'unassigned' | 'assigned' }>()
const TMap = defineAsyncComponent(() => import('./TMap.vue'))
//表单数据
const tableData = reactive<tableDataType[]>([])

const resTable = computed(() => {
    if(props.type === 'assigned'){
        return tableData.filter(item => item.arrivalTime && item.serviceStaff)
    }else if(props.type === 'unassigned'){
        return tableData.filter(item => !item.arrivalTime || !item.serviceStaff)
    }else{
        return tableData
    }
})
//触发FilterOrder.vue中的方法
const handleUpdateSearch = (data: tableDataType[]) => {
    tableData.length = 0;
    tableData.push(...data);
    emit('sendData', tableData)
}
const { showCancelOrder, operateCancel, data, cancelOrder } = useCancel(tableData, emit)
function goOrderDetail({row}:any){
    const id = row.id
    router.push({ 
      name:'orderDetail',
      params: { id }
    })
}
const { selectHuman, confirmServiceHuman } = staffSelectStore

onMounted(() => {
    instance.get('/api/order/orderList').then(resp => {
        const { data } = resp
        Object.assign(tableData, data)
        emit('sendData', data)
    },err => {
        const { status } = err
        if(status === 401){
            ElMessage.error('暂无权限')
        }
    })
    // 监听选择员工事件
    emitter.on('selectHuman', handleSelectHuman)
})

// 处理选择员工事件
const handleSelectHuman = (row: any) => {
    selectHuman(row)
}

// 更新表格数据中的serviceStaff
const updateTableServiceStaff = (orderId: number, serviceStaff: string) => {
    const index = tableData.findIndex(item => item.id === orderId)
    if (index !== -1) {
        tableData[index].serviceStaff = serviceStaff
    }
}

// 监听分配员工成功事件
emitter.on('updateServiceStaff', ({ orderId, serviceStaff }) => {
    updateTableServiceStaff(orderId, serviceStaff)
})

// 在组件卸载时移除事件监听
onUnmounted(() => {
    emitter.off('selectHuman', handleSelectHuman)
    emitter.off('updateServiceStaff')
    staffSelectStore.resetAllState()
})
</script>

<style scoped>
.el-button+.el-button{
    margin-left: 5px;
}
:deep(.el-dialog__header){
    text-align: center;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.el-radio{
    margin-right: 10px;
}
</style>